<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			
			.coupon-part{
				min-height: 460px;
			}

			.uinfo-part .horizon{
				height: 1px;
				background: #efefef;
			}
			.uinfo-part .topoffset{
				margin-top: 15px;
			}
			.uinfo-part .coupon .image{
				width: 610px;
				height: 170px;
				border-radius: 5px;
				overflow: hidden;
				margin-right: 20px;
				cursor: pointer;
			}
			
			.uinfo-part .uinfo{
				margin-top: 10px;
			}
			
			.uinfo-area {
				width: 920px;
				margin-left: auto;
				margin-right: auto;
			}
			
			.uinfo-part .menu{
				height: 60px;
				box-sizing: border-box;
				width: 100%;
				line-height: 60px;
				font-size: 15px;
				color: #333333;
				text-align: left;
				vertical-align: middle;
			}
			.user-part .menu img{
				width: 15px;
				height: auto;
				margin-right: 10px;
				line-height: 60px;
			}
			
			.menuword{
				height: 60px;
				line-height: 60px;
				font-size: 15px;
				left: 0px;
				top: -2px;
				position:relative;
			}
			
			.iconPanl{
				margin-top: 25px;
			}
			
			.iconword{
				font-size: 16px;
				color: #999999;
			}
			
			.iconPanl .btns{
				font-size: 15px;
				background-color: #ffc000;
				padding: 8px;
				padding-left: 15px;
				padding-right: 15px;
				color: #FFFFFF;
				cursor: pointer;
			}
			
			.upicon{
				width: 164px;
				height: 164px;		
			}
			
			.iconhead-right{
				margin-left: 80px;
			}
			
			.iconhead{
				width: 108px;
				height: 108px;	
				margin-bottom: 0px;
			}
			
			.iconTipWord{
				font-size: 15px;
				color: #999999;
			}
			
			.formpanl{
				margin-top: 20px;
			}
			
			.formpanl .title{
				margin-top: 20px;
			}
			
			.formpanl .title .formword{
				font-size: 15px;
				color: #999999;
			}
			
			.formpanl .title .forminput{
				margin-left: 25px;
				width: 210px;
				height: 25px;
				border-radius:4px;
				border:1px solid #c8cccf;
				padding:0 5px;
			}
			
			.saveicon{
				width: 120px;
				height: 40px;
				cursor: pointer;
			}
			
			.editLab{
				margin-left: 160px;
				color: #ff9c00;
				font-size: 15px;
			}
			
			.upimage {
				position:absolute;
				top: -10px;
				left: 0px;
				opacity: 0;
				filter: alpha(opacity=0);
				width: 100px;
				height: 30px;
				margin: 1px;
				/*border:groove;*/
			}
		</style>
	</head>
	
	
	<body>
		<div class="uinfo-part" id="userinfo">
			<div class="uinfo-area" >
				<div class="menu">
					<img src="../img/icon/person1.png" />
					<span class="menuword">基本账户资料</span>
				</div>
				<div class="iconPanl">
					<p class="iconword">头&nbsp;&nbsp;&nbsp;&nbsp;像</p>
					
					<div style="position: relative;">
						<span class="btns">选择图片</span>
						<input type="file" name="file" class="upimage" id="edupload_file" accept=".jpg,.jpeg,.gif,.png">
					</div>
					
					<div class="items-display-flex flex-row" style="margin-top: 15px;height: 200px;">
						<img src="../img/icon/upicon.jpg" class="upicon"/>
						<div class="items-display-flex flex-column iconhead-right" style="align-items:flex-start;">
							<p class="iconTipWord">预览&nbsp;:&nbsp;(108px*108px)</p>
							<img src="../img/icon/iconhead.png" class="iconhead" id="showiconhead"/>
						</div>
					</div>
					
					<div class="formpanl">
						<div class="title">
							<span class="formword">昵&nbsp;&nbsp;&nbsp;&nbsp;称</span>
							<input class="forminput" v-model="nickname"/>
						</div>
						
						<div class="title" >
							<span class="formword">手&nbsp;&nbsp;&nbsp;&nbsp;机</span>
							<input class="forminput" id="mobileids" v-model="mobile" onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)" onblur="this.v();"/>
							<!--<span class="editLab">修改</span>-->
						</div>
						
						<!--<div class="title">
							<span class="formword">微&nbsp;&nbsp;&nbsp;&nbsp;信</span>
							<input class="forminput" v-model="wxnames"/>
							<span class="editLab">已绑定</span>
						</div>-->
						
						<div class="title" style="margin-top: 30px;">
							<img src="../img/save.png" class="saveicon" v-on:click="editUserInfo()"/>
						</div>
					</div>
					
				</div>
			</div>
		</div>
	</body>
	
	<script>
		
		var curUserid = 0;
		
		var uinfovue = new Vue({
			el:'#userinfo',
			data:{
				nickname:'',
				mobile:0,
				avatar:'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIlCa0fwksPMXsRBvgzHQ7szrNKE9A4mZjm9v8cJDsTQDedib0xsMlzgkrGeORq0Q8IGsIdspJ9m1Q/132',
				wxnames:'',
				avatarb64:'',
				isloadtops:false
			},
			methods:{
				editUserInfo:function(){
					
					if(!this.nickname){
						showtips({},{tipsmsg:'用户名错误',tipstype:2});
						return;
					}
					
					if(this.nickname.length<2){
						showtips({},{tipsmsg:'用户名太短',tipstype:2});
						return;
					}
					
					if(this.nickname.length>30){
						showtips({},{tipsmsg:'用户名太长',tipstype:2});
						return;
					}
					
					if(!checkPhone(this.mobile)){						
						return;
					}
					
					if(!this.avatar){
						showtips({},{tipsmsg:'图片错误',tipstype:2});
						return;
					}
					
					var urlstr = publicUrl + '/v1/wx-user/edit-uinfo';
					jQuery.post(urlstr, {
						id: uinfo.uid,
						nickname:this.nickname,
						mobile:this.mobile,
						avatar:this.avatar,
						avatarb64:this.avatarb64
					}, function(res) {		
						if(res.code=="success"){
							showtips({},{tipsmsg:'修改成功',tipstype:2});
							var str = JSON.stringify(res.data);
							setCookie('userinfo',str);
							uinfo = getUserInfo();
							
							HeaderUserInfoUpdata();
							userbackInfo();
						}
						else {
							showtips({},{tipsmsg:"修改失败"+res.message,tipstype:2});
		            	}
					});
					
				}
			}
		});
		
		$("#edupload_file").onchange = function() {
			gen_base64();
		};
		
		$("#edupload_file").change(function () {
		   gen_base64();
		})
		
		var imgMaxSize = 1024*1024;
		function gen_base64() {
			console.log('abcdefg');
			var file = document.getElementById("edupload_file").files[0];
			var r = new FileReader(); //本地预览
			let self = this;
			r.onload = function() {
	
				if(file.size>self.imgMaxSize){
					showtips({},{tipsmsg:"图片尺寸不能超过1M",tipstype:2});
					return;
				}
				
				var fileNameArray = file.name.split('.');
		        var fileTypeValue = "";
		        if (fileNameArray.length > 1) {
		            fileTypeValue = fileNameArray[fileNameArray.length - 1];
		        }
		        
		        if ((fileTypeValue == "jpg" || fileTypeValue == "png" || fileTypeValue == "jpeg" || fileTypeValue == "gif")) {
		            
		        } else {
		            showtips({},{tipsmsg:"请上传jpg,jpeg,gif或png类型的文件",tipstype:2});
		            return;
		        }

				
//				console.log(r.result);
				uinfovue.avatarb64 = r.result;
				
				
				// 获取 window 的 URL 工具
				var URL = window.URL || window.webkitURL;
				// 通过 file 生成目标 url
				var imgURL = URL.createObjectURL(file);
				//用attr将img的src属性改成获得的url
				document.getElementById("showiconhead").src = imgURL;			
			}
			r.readAsDataURL(file); //Base64
	    }
		
		function checkPhone(mobile){
			if(mobile == "" || mobile == ""){
//				alert("请输入手机号码");
				document.getElementById("mobileids").focus();
				showtips({},{tipsmsg:'请输入手机号码',tipstype:2});
				return false;
			}
			var regExp = /^(86)?((13\d{9})|(15[0,1,2,3,5,6,7,8,9]\d{8})|(18[0,5,6,7,8,9]\d{8}))$/;
			if(!regExp.test(mobile)){
//				alert("手机号码格式错误");
				document.getElementById("mobileids").focus();
				showtips({},{tipsmsg:'手机号码格式错误',tipstype:2});
				return false;
			}
			
			return true;
		}
		
		
		function showtips(objs,tipsobj){
			if(!uinfovue.isloadtops){
				$('#tips_sets').load('../template/tips.html',function(){
					InitTip(tipsobj,objs);
					uinfovue.isloadtops = true;
					showtipsPanel();
				});
			}
			else{
				showtipsPanel();
				InitTip(tipsobj,objs);
			}
		}
		
		//取消方法
		function tipsokfun(objs){
			closePanl();
		}
		
		function tipsexitfun(objs){
			closePanl();
		}
		
		
		var uinfo = getUserInfo();
		if(uinfo){
			uinfovue.nickname = uinfo.nickname;
			uinfovue.mobile = uinfo.mobile;
			document.getElementById("showiconhead").src = uinfo.headimgurl;
		}
		
	</script>
</html>
